<template>
  <div
    class="min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 flex items-center justify-center p-4"
  >
    <div class="w-full max-w-2xl">
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-gray-800 mb-2">用户注册</h1>
          <p class="text-gray-600">请填写以下信息完成注册</p>
        </div>

        <el-form
          ref="registerFormRef"
          :model="form"
          :rules="rules"
          label-position="top"
          size="large"
        >
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 账号 -->
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="form.username"
                placeholder="请输入6-20位字母数字组合"
                maxlength="20"
                clearable
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 手机号 -->
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请输入11位手机号"
                maxlength="11"
                clearable
              >
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 姓名 -->
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入真实姓名"
                maxlength="20"
                clearable
              >
                <template #prefix>
                  <el-icon><UserFilled /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 年龄 -->
            <el-form-item label="年龄" prop="age">
              <el-input-number
                v-model="form.age"
                :min="1"
                :max="120"
                placeholder="请输入年龄"
                class="w-full"
                controls-position="right"
              />
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="性别" prop="gender" class="md:col-span-2">
              <el-radio-group v-model="form.gender" class="w-full">
                <el-radio value="male" size="large">男</el-radio>
                <el-radio value="female" size="large">女</el-radio>
                <el-radio value="other" size="large">其他</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 邮箱 -->
            <el-form-item label="邮箱" prop="email" class="md:col-span-2">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱地址"
                clearable
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入6-20位密码"
                maxlength="20"
                clearable
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 确认密码 -->
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="form.confirmPassword"
                :type="showConfirmPassword ? 'text' : 'password'"
                placeholder="请再次输入密码"
                maxlength="20"
                clearable
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <!-- 用户协议 -->
          <el-form-item prop="agreeTerms" class="mt-6">
            <el-checkbox v-model="form.agreeTerms">
              我已阅读并同意
              <a href="#" class="text-blue-600 hover:text-blue-800">用户协议</a>
              和
              <a href="#" class="text-blue-600 hover:text-blue-800">隐私政策</a>
            </el-checkbox>
          </el-form-item>

          <el-button
            type="primary"
            class="w-full"
            size="large"
            :loading="loading"
            @click="handleRegister"
          >
            立即注册
          </el-button>
        </el-form>

        <div class="text-center mt-6">
          <p class="text-gray-600">
            已有账号？
            <a
              href="/login"
              class="text-blue-600 hover:text-blue-800 font-medium"
            >
              立即登录
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import {
  User,
  Lock,
  Phone,
  UserFilled,
  Message,
} from "@element-plus/icons-vue";

definePageMeta({
  layout: false,
});

useHead({
  title: "用户注册",
});

// 表单引用
const registerFormRef = ref();

// 表单数据
const form = reactive({
  username: "",
  phone: "",
  name: "",
  age: null as number | null,
  gender: "",
  email: "",
  password: "",
  confirmPassword: "",
  agreeTerms: false,
});

// 状态管理
const loading = ref(false);
const showPassword = ref(false);
const showConfirmPassword = ref(false);

// 表单验证规则
const rules = {
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9]{6,20}$/,
      message: "账号必须为6-20位字母数字组合",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 20, message: "姓名长度在2-20个字符之间", trigger: "blur" },
  ],
  age: [
    { required: true, message: "请输入年龄", trigger: "blur" },
    {
      type: "number",
      min: 1,
      max: 120,
      message: "年龄必须在1-120岁之间",
      trigger: "blur",
    },
  ],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在6-20位之间", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== form.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  agreeTerms: [
    {
      validator: (rule: any, value: boolean, callback: any) => {
        if (!value) {
          callback(new Error("请同意用户协议和隐私政策"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
};

// 提交注册
const handleRegister = async () => {
  if (!registerFormRef.value) return;

  await registerFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true;
      try {
        await new Promise((resolve) => setTimeout(resolve, 1500));
        ElMessage.success("注册成功！请登录");
        await navigateTo("/login");
      } catch (error) {
        ElMessage.error("注册失败，请重试");
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style scoped>
:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  padding-left: 15px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  opacity: 0.9;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #10b981;
  border-color: #10b981;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #10b981;
}
</style>
